<template>
  <div class="page">
    <!--信函打印展示-->
    <div :style="{alignContent: 'center',width: '700px',height:'500px',fontSize: '16px',lineHeight: '200%',margin: 'auto',color: 'black'}" v-for="val in this.PrintInfo">
      <p :style="{textAlign: 'center',fontSize: '22px',margin:'-10px auto 0px auto',opacity:reveal}">
        <b>逾 期 还 款 催 收 函</b>
      </p>
      <p :style="{textAlign: 'left'}"><span :style="{opacity:reveal}">借款人：</span>
        <span class="m3block" :style="{display: 'inline-block',textAlign: 'center',lineHeight: '16px',borderBottom: bottomLine,width: '120px'}">
          {{val.custName}}
        </span>
      </p>
      <p :style="{textIndent: '2em',textAlign: 'justify',wordWrap: 'breakWord',lineHeight:'32px'}">
        <span :style="{opacity:reveal}">根据编号为</span>
        <span :style="{display: 'inline-block',textAlign: 'center',lineHeight: '16px', borderBottom: bottomLine,width: '180px'}">{{val.cupoCasenum}}</span>
        <span :style="{opacity:reveal}">的案件所示，您向我司借款</span>
        <span :style="{display: 'inline-block',textAlign: 'center',lineHeight: '16px', borderBottom: bottomLine,width: '160px'}">{{SomeSymbol.moneySymbol}}{{val.cupoContnum}}{{SomeSymbol.yuanSymbol}}</span>
        <span :style="{opacity:reveal}">。由于此笔贷款现处于逾期还款状态，截止目前已逾期</span>
        <span :style="{display: 'inline-block',textAlign: 'center',lineHeight: '16px', borderBottom: bottomLine,width: '100px'}">{{val.cupoOverday}}{{SomeSymbol.daySymbol}}</span>
        <span :style="{opacity:reveal}">，并对我司的正常经营活动造成较大影响。为避免更加不利的局面发生，也为维系您与我司的合作关系，我司特此就有关事宜致函于您。请您抓紧落实还款资金，于接到本通知之日起 7 个工作日内清偿所欠本息，否则我司将按合同约定和法律规定追究违约责任。</span>
      </p>
      <p :style="{textAlign: 'left',textIndent: '2em',opacity:reveal}">特此通知</p>
      <p :style="{paddingTop: '20px',textAlign: 'right',paddingRight: '20%',paddingBottom: '40px',opacity:reveal}">（公章）</p>
      <p :style="{textAlign: 'right',paddingRight: '10%'}">
        <span :style="{display: 'inline-block',textAlign: 'center',width: '40px'}">{{YMD.year}}</span>
        <span :style="{opacity:reveal}">年</span>
        <span :style="{display: 'inline-block',textAlign: 'center',width: '30px'}">{{YMD.month}}</span>
        <span :style="{opacity:reveal}">月</span>
        <span :style="{display: 'inline-block',textAlign: 'center',width: '30px'}">{{YMD.day}}</span>
        <span :style="{opacity:reveal}">日</span>
      </p>
    </div>
    <!--批量打印展示-->
    <div :style="{alignContent: 'center',width: '700px',height:BrowserType.printPageHeight,fontSize: '16px',lineHeight: '200%',margin: 'auto',color: 'black'}" v-for="val in this.printDataArr">
      <p :style="{textAlign: 'center',margin:'-7px auto 0px auto',fontSize: '22px',opacity:reveal}">
        <b>逾 期 还 款 催 收 函</b>
      </p>
      <p :style="{textAlign: 'left'}"><span :style="{opacity:reveal}">借款人：</span>
        <span class="m3block" :style="{display: 'inline-block',textAlign: 'center',lineHeight: '16px',borderBottom: bottomLine,width: '120px'}">
          {{val.custName}}
        </span>
      </p>
      <p :style="{textIndent: '2em',textAlign: 'justify',wordWrap: 'breakWord',lineHeight:'32px'}">
        <span :style="{opacity:reveal}">根据编号为</span>
        <span :style="{display: 'inline-block',textAlign: 'center',lineHeight: '16px', borderBottom: bottomLine,width: '180px'}">{{val.cupoCasenum}}</span>
        <span :style="{opacity:reveal}">的案件所示，您向我司借款</span>
        <span :style="{display: 'inline-block',textAlign: 'center',lineHeight: '16px', borderBottom: bottomLine,width: '160px'}">{{SomeSymbol.moneySymbol}}{{val.cupoContnum}}{{SomeSymbol.yuanSymbol}}</span>
        <span :style="{opacity:reveal}">。由于此笔贷款现处于逾期还款状态，截止目前已逾期</span>
        <span :style="{display: 'inline-block',textAlign: 'center',lineHeight: '16px', borderBottom: bottomLine,width: '100px'}">{{val.cupoOverday}}{{SomeSymbol.daySymbol}}</span>
        <span :style="{opacity:reveal}">，并对我司的正常经营活动造成较大影响。为避免更加不利的局面发生，也为维系您与我司的合作关系，我司特此就有关事宜致函于您。请您抓紧落实还款资金，于接到本通知之日起 7 个工作日内清偿所欠本息，否则我司将按合同约定和法律规定追究违约责任。</span>
      </p>
      <p :style="{textAlign: 'left',textIndent: '2em',opacity:reveal}">特此通知</p>
      <p :style="{paddingTop: '20px',textAlign: 'right',paddingRight: '20%',paddingBottom: '40px',opacity:reveal}">（公章）</p>
      <p :style="{textAlign: 'right',paddingRight: '10%'}">
        <span :style="{display: 'inline-block',textAlign: 'center',width: '40px'}">{{YMD.year}}</span>
        <span :style="{opacity:reveal}">年</span>
        <span :style="{display: 'inline-block',textAlign: 'center',width: '30px'}">{{YMD.month}}</span>
        <span :style="{opacity:reveal}">月</span>
        <span :style="{display: 'inline-block',textAlign: 'center',width: '30px'}">{{YMD.day}}</span>
        <span :style="{opacity:reveal}">日</span>
      </p>
    </div>
    <!--模板展示-->
    <div :style="{alignContent: 'center',width: '700px',height:'500px',fontSize: '16px',lineHeight: '200%',margin: 'auto',color: 'black',display:dp}">
      <p :style="{textAlign: 'center',fontSize: '22px',margin:'-10px auto 0px auto',opacity:reveal}">
        <b>逾 期 还 款 催 收 函</b>
      </p>
      <p :style="{textAlign: 'left'}"><span :style="{opacity:reveal}">借款人：</span>
        <span class="m3block" :style="{display: 'inline-block',textAlign: 'center',lineHeight: '16px',borderBottom: bottomLine,width: '120px'}"></span>
      </p>
      <p :style="{textIndent: '2em',textAlign: 'justify',wordWrap: 'breakWord',lineHeight:'32px'}">
        <span :style="{opacity:reveal}">根据编号为</span>
        <span :style="{display: 'inline-block',textAlign: 'center',lineHeight: '16px', borderBottom: bottomLine,width: '180px'}"></span>
        <span :style="{opacity:reveal}">的案件所示，您向我司借款</span>
        <span :style="{display: 'inline-block',textAlign: 'center',lineHeight: '16px', borderBottom: bottomLine,width: '160px'}"></span>
        <span :style="{opacity:reveal}">。由于此笔贷款现处于逾期还款状态，截止目前已逾期</span>
        <span :style="{display: 'inline-block',textAlign: 'center',lineHeight: '16px', borderBottom: bottomLine,width: '100px'}"></span>
        <span :style="{opacity:reveal}">，并对我司的正常经营活动造成较大影响。为避免更加不利的局面发生，也为维系您与我司的合作关系，我司特此就有关事宜致函于您。请您抓紧落实还款资金，于接到本通知之日起 7 个工作日内清偿所欠本息，否则我司将按合同约定和法律规定追究违约责任。</span>
      </p>
      <p :style="{textAlign: 'left',textIndent: '2em',opacity:reveal}">特此通知</p>
      <p :style="{paddingTop: '20px',textAlign: 'right',paddingRight: '20%',paddingBottom: '40px',opacity:reveal}">（公章）</p>
      <p :style="{textAlign: 'right',paddingRight: '10%',opacity:reveal}">
        <span :style="{display: 'inline-block',textAlign: 'center',width: '40px'}"></span>
        <span>年</span>
        <span :style="{display: 'inline-block',textAlign: 'center',width: '30px'}"></span>
        <span>月</span>
        <span :style="{display: 'inline-block',textAlign: 'center',width: '30px'}"></span>
        <span>日</span>
      </p>
    </div>
  </div>
</template>
<script>
  import { mapState, mapMutations } from 'vuex'
  export default {
    name: 'letter-temp-three',
    data() {
      return {
        reveal: '',
        bottomLine: '1px solid black',
        dp: 'none'
      }
    },
    props: ['printDataArr'],
    methods: {
      ...mapMutations([
        'updatePrintInfo',
        'printSomeSymbol',
        'browserType',
        'printYmdDate'
      ]),
      /**
       * 全部显示页面
       */
      l3_originStyle() {
        this.reveal = ''
        this.bottomLine = '1px solid black'
      },
      /**
       * 隐藏不打印的部分
       */
      l3_changeStyle() {
        this.reveal = '0.0'
        this.bottomLine = '0px'
      },
      /**
       * 显示信函模板
       */
      lt3ShowTemp() {
        this.dp = ''
      }
    },
    computed: {
      ...mapState({
        PrintInfo: state => state.smartAcc.print_info,
        SomeSymbol: state => state.smartAcc.some_symbol,
        BrowserType: state => state.smartAcc.browser_type,
        YMD: state => state.smartAcc.ymd_date
      })
    }
  }

</script>
<style lang="less">


</style>
